<template>
  <el-form-item :class="opt.class" :label="opt.text" :prop="opt.name" v-if="!opt.hide" size="small">
    <el-popover
      placement="top"
      trigger="hover">
      <i class="el-icon-document" slot="reference" />{{content}}
    </el-popover>
    {{content}}
  </el-form-item>
</template>

<script>
  import extend from '../extend';

  export default {
    name: "FormText",
    mixins:[extend],
    dicts:[],
    data(){
      return {
        opt:{
          class:"text-area",
          name:'',
          text:'',
          prop:'',
          icon:'',
          props:{
            type:'text',
            disabled:false
          },
          options:[],
          hide:false,
          placeholder:''
        },
        content:""
      }
    },
    mounted(){
      this.initOptions();
      this.onClick = this.opt.onClick || this.onClick;
    },
    methods:{
      getText(){
        let opt = this.opt;
        let value = this.data[this.opt.name];
        if(opt.options.length){
          this.content = _.find(opt.options,{value:`${value}`})?.label;
        }else{
          this.content = value;
        }
      },
      setValue(val){
        this.data[this.opt.name] = val;
        this.getText();
      },
      onClick(){

      }
    }
  }
</script>
